<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五星评分</title>
<style type="text/css">
#ul1{padding:0; margin:0; list-style:none;  width:300px; height:28px;}
#ul1 li{float:left;  width:27px; height:28px; }

.active{ background:url(star.gif) no-repeat 0 -28px; }
.default{ background:url(star.gif) no-repeat 0 0; }
</style>
<script src="../../js/common.js"></script>
<script type="text/javascript">
var arr=['差评','不推荐','一般','推荐','强力推荐'];
window.onload=function(){
	var oUL = document.getElementById("ul1");
	var stars = toArray( oUL.getElementsByTagName("li") );
	
	
	
	for(var i in stars){
		stars[i].index = i;
		stars[i].onmouseover = function(){
			for(var k=0; k<stars.length; k++){
				if(stars[k].getAttribute("clicked") == "true") continue;
				if(k<=this.index) stars[k].className = "active";
				else stars[k].className = "default";
			}
		}
		stars[i].onclick = function(){
			tip.innerText = arr[this.index];
			for(var k=0; k<stars.length; k++){
				if(k<=this.index) {
					stars[k].setAttribute("clicked", true);
					stars[k].className = "active";
				} else {
					stars[k].className = "default";
					stars[k].removeAttribute("clicked");
				}
			}
		}
	}
	
	oUL.onmouseout = function(){
		for(var k=0; k<stars.length; k++){
			if(stars[k].getAttribute("clicked") != "true") stars[k].className = "default";
		}
	}
	
}
</script>
</head>

<body>
<ul id="ul1" >
	<li class="default"> </li>
	<li class="default"> </li>
	<li class="default"> </li>
	<li class="default"> </li>
	<li class="default"> </li>
</ul>
<div id="tip"></div>
</body>
</html>
